<template>
    <div>
        <!-- 轮播图 -->
        <mt-swipe :auto="2000">
            <!-- 在组件中　使用v-for循环的话　一定使用key-->
            <mt-swipe-item v-for="item in bannerList" :key="item.title">
                <img :src="item.litpic" alt="" width="100%">
            </mt-swipe-item>
        </mt-swipe>
        <!-- 九宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newslist">  
                    <span class="mui-icon mui-icon-home"></span>  
                    <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>  
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">  
                        <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>  
                        <div class="mui-media-body">Email</div>
                </a>
            </li>  
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">  
                        <span class="mui-icon mui-icon-chatbubble"></span>  
                        <div class="mui-media-body">Chat</div>
                </a>
            </li>  
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">  
                        <span class="mui-icon mui-icon-location"></span>  
                        <div class="mui-media-body">location</div>
                </a>
            </li>  
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">  
                        <span class="mui-icon mui-icon-search"></span>  
                        <div class="mui-media-body">Search</div>
                </a>
            </li>  
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">  
                        <span class="mui-icon mui-icon-phone"></span>  
                        <div class="mui-media-body">Phone</div>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            bannerList:[]
        }
    },
    created() {
        this.getBanner();
    },
    methods: {
        getBanner(){//获取轮播图的方法
            this.$http.post('api/Flink/getBanner').then(result=>{
                if(result.body.code !=200 ){
                    alert("获取轮播图失败")
                }else{
                    this.bannerList = result.body.data
                }                
            })
        }
    },
}
</script>
<style lang="scss" scoped>
    .mint-swipe{
        height: 200px;
    }
</style>